.opening-record {
    width: 100%;
    height: 100%;
    overflow: auto;

    &-nav {
        width: 100%;
        height: 9.0625rem;
        background: #3788FE;
        box-sizing: border-box;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;

        &-content {
            display: flex;
            align-items: center;
            padding: .9375rem;

            a {
                display: flex;
                align-items: center;

                img {
                    width: .71875rem;
                    height: 1.09375rem;
                    object-fit: contain;
                }
            }

            span {
                font-size: 1rem;
                font-weight: 500;
                color: #FFFFFF;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
        }

    }

    &-info {
        width: calc(100% - 30px);
        margin: 0 auto;
        // height: 9.375rem;
        background: #FFFFFF;
        box-shadow: 0px 0px 9px 2px rgba(0, 0, 0, 0.04);
        border-radius: .25rem;
        box-sizing: border-box;
        padding: 1rem .875rem;
        display: flex;
        position: fixed;
        z-index: 2;
        top: 3.3125rem;
        left: 50%;
        transform: translateX(-50%);

        .left {
            width: 2.4375rem;
            height: 2.4375rem;
            object-fit: contain;
        }

        .right {
            width: 100%;
            margin-left: .875rem;

            .name {
                font-size: .875rem;
                font-weight: 500;
                color: #333333;
                line-height: 1.125rem;
            }

            .details {
                font-size: .75rem;
                font-weight: 500;

                .infos {
                    width: 100%;
                    height: 1.0625rem;
                    line-height: 1.0625rem;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    color: #333333;
                    margin-top: .5625rem;

                }

                .status {
                    color: #3889FF;
                    margin-right: .21875rem;
                    transform: scale(0.95);

                    &.danger {
                        color: #FC5D3B;
                    }

                    &.green {
                        color: #60C350;
                    }
                }

                .date {
                    width: 100%;
                    margin-top: .25rem;
                    color: #999999;
                    padding-bottom: .40625rem;
                    border-bottom: 1px solid #EEEEEE;

                    span {
                        transform: scale(0.95);
                    }
                }
            }
        }
    }

    &-list {
        width: calc(100% - 28px);
        background: #F7F7F7;
        border-radius: .5625rem;
        // margin: 13.4375rem auto 1.875rem;
        margin: 11rem auto 1.875rem;
        box-sizing: border-box;
        padding: 1.5625rem 0 1.5625rem .9375rem;

        .item {
            display: flex;
            padding-bottom: 1.5625rem;
            position: relative;

            &.last {
                padding-bottom: 0;

                &::before {
                    display: none;
                }
            }

            &.first {
                .right {
                    &::after {
                        background: url("./img/circular.png") no-repeat;
                        background-size: contain;
                    }
                }
            }

            &::before {
                position: absolute;
                top: 0;
                left: 5.6rem;
                content: " ";
                width: .0625rem;
                background-color: #C4C4C4;
                height: 100%;
            }

            .left {
                width: 4.375rem;
                color: #999999;
                font-size: .75rem;
                margin-right: 2.5rem;
                line-height: .875rem;
            }

            .right {
                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    left: -1.5625rem;
                    top: 0;
                    width: .625rem;
                    height: .625rem;
                    border-radius: 50%;
                    background: #C4C4C4;
                }

                .name {
                    font-size: .875rem;
                    font-weight: 500;
                    color: #333333;
                    line-height: .78125rem;
                    margin-bottom: .25rem;
                }

                .time {
                    font-size: .75rem;
                    font-weight: 500;
                    color: #58C746;
                    margin-bottom: .25rem;

                    &.red {
                        color: #EF6666;
                    }
                }

                .info {
                    width: 10rem;
                    font-size: .75rem;
                    color: #999999;
                }
            }
        }

        .not-message {
            color: #999999;
            font-size: .75rem;
            text-align: center;
            width: 100%;
            display: inline-block;
        }
    }
}